<template>
  <HeadFour :active-index="activeIndex"></HeadFour>
  <el-row>
<!--    top right bottom left-->
    <el-col :span="12" style="padding: 20px 20px 20px 10px;">
      <el-card shadow="always" style="margin: 20px;">
        <el-row :gutter="20">
          <search-bar
              :add-text = searchBarText.addText
              :search-text= searchBarText.searchText
              :placeholder-context= searchBarText.placeholderContext
              @init-wl-info="init"
              @handleDialogWlValue="handleDialogWlValue"
          >
          </search-bar>
          <two-table
              :table-data="tableData"
              :options-info="WlInfo"
              @look-detail-info="LookDetailInfo"
          >
          </two-table>
          <paging :queryForm="queryForm"
                  @my-size-change="handleSizeChange"
                  @my-current-change="handleCurrentChange">
          </paging>
        </el-row>
      </el-card>
      <dialog-wl
          v-model="dialogVisible"
          v-if="dialogVisible"
          :dialog-wl-table-value="dialogWlTableValue"
          :dialog-wl-title="dialogWlTitle"
          :queryForm="queryForm"
          @handleConfirm="handleConfirm"
      >
      </dialog-wl>
    </el-col>
    <el-col :span="12" style="padding: 20px 20px 20px 5px;">
      <el-card shadow="always" style="margin: 18px;">
          <wl-detail-table
          :detail-info="detailInfo"
          >
          </wl-detail-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import HeadFour from "@/components/header/headFour.vue";
import Paging from "@/components/pagination/paging.vue";
import SearchBar from "@/components/commons/searchBar.vue";
import TwoTable from "@/components/table/twoTable.vue";
import DialogWl from "@/components/dialog/four/dialogWl.vue";
import {onMounted, ref} from "vue";
import {
  addWlInfo,
  delWlInfo,
  editWlInfo, getWlInfo,
  upWlInfo
} from "@/api/apiPath/fourPart.js";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {isNull} from "@/api/filters.js";
import {WlInfo} from "@/api/options/fourPart/WlInfo.js";
import WlDetailTable from "@/components/table/wlDetailTable.vue";
import {initTableInfo, initWlTableInfo} from "@/api/methods/initInfo.js";
import {addTableInfo} from "@/api/methods/addInfo.js";
import {updateFormInfo} from "@/api/methods/updateInfo.js";
import {delTableInfo} from "@/api/methods/delInfo.js";

const activeIndex = '/wlxx'
const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 5,
  totalSize: 0
})
const tableData = ref([])
const dialogVisible = ref(false)
const dialogWlTitle = ref('')
const dialogWlTableValue = ref({})
const detailInfo = ref({})
const searchBarText = ref({
  addText : "新增物流信息",
  searchText : "搜索物流信息",
  placeholderContext: "请输入发货人"
})
const init = async (query)=> {
  queryForm.value.query = query
  initTableInfo(upWlInfo(queryForm.value), tableData, queryForm)
  const data = await initWlTableInfo(upWlInfo(queryForm.value))
  if (data.info.length !== 0) {
    LookDetailInfo(data.info[0])
  }
}
onMounted(async ()=> {
  await init()
})
const handleDialogWlValue = (row)=> {
  if (isNull(row)) {
    dialogWlTitle.value = "新增物流信息"
    dialogWlTableValue.value = {}
  } else {
    dialogWlTitle.value = "编辑物流信息"
    dialogWlTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}
const LookDetailInfo = async (row) => {
  try {
    detailInfo.value = await initWlTableInfo(getWlInfo(row.id))
    console.log(detailInfo.value)
  } catch (e) {
    console.log(e)
  }
}
const handleConfirm = async (formValue, formRef)=> {
  formValue = ref(formValue)
  formRef.validate( async valid => {
    if (!valid) {
      ElMessage({
        message: "请填写完整！",
        type: 'warning',
        duration: 1500
      })
    } else {
      try {
        dialogWlTitle.value === '新增物流信息'
            ? addTableInfo(addWlInfo(), formValue, upWlInfo(queryForm.value), tableData, queryForm)
            : updateFormInfo(editWlInfo(), formValue, upWlInfo(queryForm.value), tableData, queryForm)
        dialogVisible.value = false
      }catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    }
  })
}
const deleteInfo = (row)=> {
  ElMessageBox.confirm(
      '此操作将永久删除该信息，是否继续？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          delTableInfo(delWlInfo(row.id), tableData, queryForm, upWlInfo(queryForm.value))
        } catch (e) {
          console.log(e)
          ElNotification({
            message: "请求失败",
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
const handleSizeChange = (pageSize)=> {
  queryForm.value.pageSize = pageSize
  queryForm.value.pageNum = 1
  init()
}
const handleCurrentChange = (pageNum)=> {
  queryForm.value.pageNum = pageNum
  init()
}

</script>

<style scoped>

</style>